<template>
  <view class="su-prop">
    <view class="su-prop__label" :style="{width:labelWidth}">
      {{label}}
    </view>
    <view class="su-prop__value" :style="{'text-align':align}">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: "su-prop",
    props: {
      label: {
        type: String,
        default: ''
      },
      align:{
        type:String,
        default:'right'
      },
      labelWidth: {
        type: String,
        default: '70px'
      }
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .su-prop {
    display: flex;
    padding: 8upx 0;

    &__label {
      margin-right: 20upx;
      font-size: 14px;
      color: #878787;
    }

    &__value {
      flex: 1;
      font-size: 14px;
      color: #303030;
      line-height: 1.6;
      text-align: right;
    }
  }
</style>
